<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tooltip | Framework7 Documentation</title>
    <meta property="og:image" content="http://framework7.io/i/f7-banner.jpg">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@framework7io">
    <meta name="twitter:creator" content="@framework7io">
    <meta name="twitter:title" content="Tooltip | Framework7 Documentation">
    <meta name="twitter:image" content="https://avatars0.githubusercontent.com/u/31954178?s=200&amp;v=4">
    <link rel="stylesheet" href="/framework7-v3/css/normalize.css">
    <link rel="stylesheet" href="/framework7-v3/css/main.css">
    <link rel="shortcut icon" href="/framework7-v3/i/favicon.png">
    <script src="/framework7-v3/js/modernizr-2.7.1.min.js"></script>
  </head>
  <body class="body-docs">
    <header class="internal-header">
      <div class="center">
        <div class="logo-holder"><a class="logo" href="/framework7-v3/"></a></div>
        <div class="header-content">
          <div class="title">Framework7
            <div class="version">v3.6.7</div>
          </div>
          <ul class="nav">
            <li><a href="/framework7-v3/docs/">Docs</a>
              <ul>
                <li><a href="/framework7-v3/docs/introduction.html">Getting Started</a></li>
                <li><a href="/framework7-v3/docs/">Framework7 Core / API</a></li>
                <li><a href="/framework7-v3/vue/">Framework7 Vue</a></li>
                <li><a href="/framework7-v3/react/">Framework7 React</a></li>
                <li><a href="https://framework7.io/icons/" target="_blank">Framework7 Icons</a></li>
                <li><a href="/framework7-v3/docs/dom7.html">Dom7</a></li>
                <li><a href="http://idangero.us/template7/" target="_blank">Template7</a></li>
              </ul>
            </li>
            <li><a href="#">Resources</a>
              <ul>
                <li><a href="http://forum.framework7.io" target="_blank">Community Forum</a></li>
                <li><a href="https://framework7.io/tutorials/" target="_blank">Tutorials</a></li>
                <li><a href="https://framework7.io/templates/" target="_blank">Templates</a></li>
                <li><a href="https://framework7.io/plugins/" target="_blank">Plugins</a></li>
                <li><a href="https://framework7.io/showcase/" target="_blank">Apps Showcase</a></li>
                <li><a href="https://jobs.framework7.io" target="_blank">Jobs & Developers</a></li>
              </ul>
            </li>
            <li><a href="http://blog.framework7.io" target="_blank">Blog</a></li>
            <li><a href="https://framework7.io/contribute/" target="_blank">Contribute</a></li>
          </ul>
          <div class="patreon-github"><a class="patreon-button" href="https://www.patreon.com/vladimirkharlampidi" target="_blank"><span class="patreon-logo"></span><span class="patreon-text">Support Framework7</span></a>
            <div class="github-buttons"><a href="https://github.com/framework7io/framework7/" target="_blank"><img src="/framework7-v3/i/gh-logo.png"></a><a class="gh-stars" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> stars</a><a class="gh-forks" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> forks</a></div>
          </div>
        </div>
      </div>
    </header>
    <div class="bsa-cpc"></div>
    <main>
      <div class="center">
        <div class="docs-demo-device docs-demo-device-ios">
          <div class="docs-demo-device-buttons"><a class="active" data-theme="ios">iOS</a><a data-theme="md">Android</a></div>
          <div class="docs-demo-device-iframe">
            <iframe width="320" height="548" frameborder="0" scrolling="on"></iframe>
            <div class="fade-overlay"></div>
          </div>
          <div class="docs-demo-device-android-buttons">
            <div class="triangle"></div>
            <div class="circle"></div>
            <div class="square"></div>
          </div>
        </div>
        <div class="docs-nav">
          <div class="docs-nav-toggle"><span></span><span></span><span></span></div>
          <ul>
            <li>
              <div class="title">Get Started</div>
              <ul>
                <li><a href="introduction.html">Introduction</a></li>
                <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
                <li><a href="installation.html">Installation</a></li>
                <li><a href="app-layout.html">App HTML Layout</a></li>
                <li><a href="rtl-layout.html">RTL Layout</a></li>
                <li><a href="init-app.html">Initialize App</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Events</div>
              <ul>
                <li><a href="events.html">Events</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Router / Navigation</div>
              <ul>
                <li><a href="routes.html">Routes</a></li>
                <li><a href="router-component.html">Router Component</a></li>
                <li><a href="view.html#router-api-methods-properties">Router API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Components</div>
              <ul>
                <li><a href="app.html">App / Core</a></li>
                <li><a href="accordion.html">Accordion / Collapsible</a></li>
                <li><a href="action-sheet.html">Action Sheet / Actions</a></li>
                <li><a href="autocomplete.html">Autocomplete</a></li>
                <li><a href="badge.html">Badge</a></li>
                <li><a href="block.html">Block / Content Block</a></li>
                <li><a href="button.html">Button</a></li>
                <li><a href="calendar.html">Calendar / Datepicker</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="checkbox.html">Checkbox</a></li>
                <li><a href="chips.html">Chips / Tags</a></li>
                <li><a href="contacts-list.html">Contacts List</a></li>
                <li><a href="data-table.html">Data Table</a></li>
                <li><a href="dialog.html">Dialog</a></li>
                <li><a href="elevation.html">Elevation</a></li>
                <li><a href="floating-action-button.html">Floating Action Button / FAB</a></li>
                <li><a href="form.html">Form Data / Storage</a></li>
                <li><a href="gauge.html">Gauge</a></li>
                <li><a href="grid.html">Grid / Layout Grid</a></li>
                <li><a href="icons.html">Icons</a></li>
                <li><a href="infinite-scroll.html">Infinite Scroll</a></li>
                <li><a href="inputs.html">Inputs / Form Inputs</a></li>
                <li><a href="lazy-load.html">Lazy Load</a></li>
                <li><a href="link.html">Link</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="list-index.html">List Index</a></li>
                <li><a href="login-screen.html">Login Screen</a></li>
                <li><a href="messagebar.html">Messagebar</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="notification.html">Notification</a></li>
                <li><a href="page.html">Page</a></li>
                <li><a href="panel.html">Panel / Side Panels</a></li>
                <li><a href="photo-browser.html">Photo Browser</a></li>
                <li><a href="picker.html">Picker</a></li>
                <li><a href="popover.html">Popover</a></li>
                <li><a href="popup.html">Popup</a></li>
                <li><a href="preloader.html">Preloader</a></li>
                <li><a href="progressbar.html">Progressbar</a></li>
                <li><a href="pull-to-refresh.html">Pull to Refresh</a></li>
                <li><a href="radio.html">Radio</a></li>
                <li><a href="range-slider.html">Range Slider</a></li>
                <li><a href="searchbar.html">Searchbar</a></li>
                <li><a href="sheet-modal.html">Sheet Modal</a></li>
                <li><a href="smart-select.html">Smart Select</a></li>
                <li><a href="sortable-list.html">Sortable List</a></li>
                <li><a href="statusbar.html">Statusbar</a></li>
                <li><a href="stepper.html">Stepper</a></li>
                <li><a href="subnavbar.html">Subnavbar</a></li>
                <li><a href="swiper.html">Swiper</a></li>
                <li><a href="swipeout.html">Swipeout</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="timeline.html">Timeline</a></li>
                <li><a href="toast.html">Toast</a></li>
                <li><a href="toggle.html">Toggle</a></li>
                <li><a href="toolbar-tabbar.html">Toolbar / Tabbar</a></li>
                <li><a href="tooltip.html">Tooltip</a></li>
                <li><a href="vi.html">Video Intelligence (vi)</a></li>
                <li><a href="view.html">View / Router</a></li>
                <li><a href="virtual-list.html">Virtual List</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Framework7 Icons</div>
              <ul>
                <li><a href="/icons/">Framework7 Icons Cheatsheet</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Styling</div>
              <ul>
                <li><a href="iphone-x.html">iPhone X</a></li>
                <li><a href="color-themes.html">Color Themes</a></li>
                <li><a href="typography.html">Typography</a></li>
                <li><a href="hairlines.html">Hairlines</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Dom7</div>
              <ul>
                <li><a href="dom7.html">Dom7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Template7</div>
              <ul>
                <li><a href="template7.html">Template7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Fast Clicks</div>
              <ul>
                <li><a href="fast-clicks.html">Fast Clicks</a></li>
                <li><a href="active-state.html">Active State</a></li>
                <li><a href="tap-hold.html">Tap Hold Event (Long Tap)</a></li>
                <li><a href="touch-ripple.html">Touch Ripple (MD Theme)</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Utilities</div>
              <ul>
                <li><a href="request.html">Request / Ajax</a></li>
                <li><a href="utils.html">Utils</a></li>
                <li><a href="device.html">Device</a></li>
                <li><a href="support.html">Support</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Plugins API</div>
              <ul>
                <li><a href="plugins-api.html">Plugins API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Lazy Modules</div>
              <ul>
                <li><a href="lazy-modules.html">Lazy Modules</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Custom Build</div>
              <ul>
                <li><a href="custom-build.html">Custom Build</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="docs-content">
          <div class="improve-docs-link"><a href="https://github.com/gzxishan/framework7-websitev3/edit/master/src/pug/undefined" target="_blank">Improve this Doc</a></div>
          <h1>Tooltip</h1>
          <ul class="docs-index"></ul>
          <p>Tooltips display informative text when users hover over, or tap an target element.</p>
          <p>Tooltip can be positioned around any element with any HTML content inside.</p>
          <h2>Tooltip Layout</h2>
          <p>Tooltip is a JavaScript-only component, it doesn't have any HTML layout.</p>
          <h2>Tooltip App Methods</h2>
          <p>We need to create/initialize the Tooltip. Let's look at related App methods to work with Tooltip:</p>
          <div class="method-wrap">
            <p><span class="method">app.tooltip.create(<span>parameters</span>)</span>- create Tooltip instance</p>
            <ul class="method-parameters">
              <li><span class="parameter">parameters</span> - <span class="parameter-type">object</span>. Object with tooltip parameters</li>
            </ul>
            <p class="method-returns">Method returns created Tooltip instance</p>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.tooltip.destroy(<span>targetEl</span>)</span>- destroy Tooltip instance</p>
            <ul class="method-parameters">
              <li><span class="parameter">targetEl</span> - <span class="parameter-type">HTMLElement</span> or <span class="parameter-type">string</span> (with CSS Selector) or <span class="parameter-type">object</span> (instance). Tooltip element or Tooltip instance to destroy.</li>
            </ul>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.tooltip.get(<span>targetEl</span>)</span>- get Tooltip instance by its target HTML element</p>
            <ul class="method-parameters">
              <li><span class="parameter">targetEl</span> - <span class="parameter-type">HTMLElement</span> or <span class="parameter-type">string</span> (with CSS Selector). Tooltip target element.</li>
            </ul>
            <p class="method-returns">Method returns Tooltip instance</p>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.tooltip.show(<span>targetEl</span>)</span>- show Tooltip</p>
            <ul class="method-parameters">
              <li><span class="parameter">targetEl</span> - <span class="parameter-type">HTMLElement</span> or <span class="parameter-type">string</span> (with CSS Selector). Tooltip target element.</li>
            </ul>
            <p class="method-returns">Method returns Tooltip instance</p>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.tooltip.hide(<span>targetEl</span>)</span>- hide Tooltip</p>
            <ul class="method-parameters">
              <li><span class="parameter">el</span> - <span class="parameter-type">HTMLElement</span> or <span class="parameter-type">string</span> (with CSS Selector). Tooltip target element.</li>
            </ul>
            <p class="method-returns">Method returns Tooltip instance</p>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.tooltip.setText(<span>targetEl</span>, <span>text</span>)</span>- change Tooltip text</p>
            <ul class="method-parameters">
              <li><span class="parameter">el</span> - <span class="parameter-type">HTMLElement</span> or <span class="parameter-type">string</span> (with CSS Selector). Tooltip target element.</li>
              <li><span class="parameter">text</span> - <span class="parameter-type">string</span> - new text to set in specified Tooltip.</li>
            </ul>
            <p class="method-returns">Method returns Tooltip instance</p>
          </div>
          <h2>Tooltip Parameters</h2>
          <p>Now let's look at list of available parameters we need to create Tooltip:</p>
          <table class="params-table">
            <thead>
              <tr>
                <th>Parameter</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>targetEl</td>
                <td>HTMLElement<br>string</td>
                <td></td>
                <td>Tooltip target element. Tooltip will be shown around this element. HTMLElement or string with CSS selector of tooltip target element</td>
              </tr>
              <tr>
                <td>text</td>
                <td>string</td>
                <td></td>
                <td>Tooltip text or HTML content</td>
              </tr>
              <tr>
                <td>cssClass</td>
                <td>string</td>
                <td></td>
                <td>Additional css class will be added to Tooltip element. Can be used for additional tooltip styling</td>
              </tr>
              <tr>
                <td>render</td>
                <td>function (tooltip)</td>
                <td></td>
                <td>Function to render tooltip element, must return full tooltip HTML layout string</td>
              </tr>
              <tr>
                <td>on</td>
                <td>object</td>
                <td></td>
                <td>
                  Object with events handlers. For example:<pre><code class="js"><span class="token keyword">var</span> tooltip <span class="token operator">=</span> app<span class="token punctuation">.</span>tooltip<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  targetEl<span class="token punctuation">:</span> <span class="token string">'.some-link'</span><span class="token punctuation">,</span>
  on<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">show</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Tooltip became visible'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</pre></code>
                </td>
              </tr>
            </tbody>
          </table>
          <h2>Tooltip Methods & Properties</h2>
          <p>So to create Tooltip we have to call:</p><pre><code class="js"><span class="token keyword">var</span> tooltip <span class="token operator">=</span> app<span class="token punctuation">.</span>tooltip<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">/* parameters */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
          <p>After that we have its initialized instance (like <code>tooltip</code> variable in example above) with useful methods and properties:</p>
          <table class="methods-table">
            <tbody>
              <tr>
                <th colspan="2">Properties</th>
              </tr>
              <tr>
                <td>tooltip.app</td>
                <td>Link to global app instance</td>
              </tr>
              <tr>
                <td>tooltip.targetEl</td>
                <td>Tooltip target HTML element</td>
              </tr>
              <tr>
                <td>tooltip.$targetEl</td>
                <td>Dom7 instance with tooltip target HTML element</td>
              </tr>
              <tr>
                <td>tooltip.el</td>
                <td>Tooltip itself HTML element</td>
              </tr>
              <tr>
                <td>tooltip.$el</td>
                <td>Dom7 instance with tooltip HTML element</td>
              </tr>
              <tr>
                <td>tooltip.text</td>
                <td>Tooltip text/content</td>
              </tr>
              <tr>
                <td>tooltip.opened</td>
                <td>Boolean property indicating whether it is opened/visible or not</td>
              </tr>
              <tr>
                <td>tooltip.params</td>
                <td>Tooltip parameters</td>
              </tr>
              <tr>
                <th colspan="2">Methods</th>
              </tr>
              <tr>
                <td>tooltip.show(<span>targetEl</span>)</td>
                <td>Show tooltip around <code>targetEl</code> element. If <code>targetEl</code> is not specified, then it will use <code>targetEl</code> passed in parameters on initialization</td>
              </tr>
              <tr>
                <td>tooltip.hide()</td>
                <td>Hide tooltip</td>
              </tr>
              <tr>
                <td>tooltip.setText(<span>text</span>)</td>
                <td>Change tooltip text or HTML content to the new one</td>
              </tr>
              <tr>
                <td>tooltip.destroy()</td>
                <td>Destroys tooltip instance</td>
              </tr>
              <tr>
                <td>tooltip.on(<span>event</span>, <span>handler</span>)</td>
                <td>Add event handler</td>
              </tr>
              <tr>
                <td>tooltip.once(<span>event</span>, <span>handler</span>)</td>
                <td>Add event handler that will be removed after it was fired</td>
              </tr>
              <tr>
                <td>tooltip.off(<span>event</span>, <span>handler</span>)</td>
                <td>Remove event handler</td>
              </tr>
              <tr>
                <td>tooltip.off(<span>event</span>)</td>
                <td>Remove all handlers for specified event</td>
              </tr>
              <tr>
                <td>tooltip.emit(<span>event</span>, <span>...args</span>)</td>
                <td>Fire event on instance</td>
              </tr>
            </tbody>
          </table>
          <h2>Tooltip Events</h2>
          <p>Tooltip will fire the following DOM events on tooltip element and events on app and tooltip instance:</p>
          <h3>DOM Events</h3>
          <table class="events-table">
            <thead>
              <tr>
                <th>Event</th>
                <th>Target</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>tooltip:show</td>
                <td>
                  Tooltip Element<br>Tooltip Target</td>
                <td>Event will be triggered when Tooltip becomes visible</td>
              </tr>
              <tr>
                <td>tooltip:hide</td>
                <td>
                  Tooltip Element<br>Tooltip Target</td>
                <td>Event will be triggered when Tooltip becomes hidden</td>
              </tr>
              <tr>
                <td>tooltip:beforedestroy</td>
                <td>
                  Tooltip Element<br>Tooltip Target</td>
                <td>Event will be triggered right before Tooltip instance will be destroyed</td>
              </tr>
            </tbody>
          </table>
          <h3>App and Tooltip Instance Events</h3>
          <p>Tooltip instance emits events on both self instance and app instance. App instance events has same names prefixed with <code>tooltip</code>.</p>
          <table class="events-table double-events-table">
            <thead>
              <tr>
                <th>Event</th>
                <th>Arguments</th>
                <th>Target</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>show</td>
                <td><span>(tooltip)</span></td>
                <td>tooltip</td>
                <td rowspan="2">Event will be triggered when Tooltip becomes visible. As an argument event handler receives Tooltip instance</td>
              </tr>
              <tr>
                <td>tooltipShow</td>
                <td><span>(tooltip)</span></td>
                <td>app</td>
              </tr>
              <tr>
                <td>hide</td>
                <td><span>(tooltip)</span></td>
                <td>tooltip</td>
                <td rowspan="2">Event will be triggered when Tooltip becomes hidden. As an argument event handler receives Toolitp instance</td>
              </tr>
              <tr>
                <td>tooltipHide</td>
                <td><span>(tooltip)</span></td>
                <td>app</td>
              </tr>
              <tr>
                <td>beforeDestroy</td>
                <td><span>(tooltip)</span></td>
                <td>tooltip</td>
                <td rowspan="2">Event will be triggered right before Tooltip instance will be destroyed. As an argument event handler receives Tooltip instance</td>
              </tr>
              <tr>
                <td>tooltipBeforeDestroy</td>
                <td><span>(tooltip)</span></td>
                <td>app</td>
              </tr>
            </tbody>
          </table>
          <h2>Tooltip Auto Initialization</h2>
          <p>If you don't need to use Tooltip API and your Tooltip target element is inside of the page and presented in DOM on moment of page initialization then it can be auto initialized with just adding <code>tooltip-init</code> class to target element, and specifying tooltip text in its <code>data-tooltip</code> attribute:</p><pre><code class="html"><span class="token comment">&lt;!-- Add tooltip-init class and specify tooltip text in data-tooltip attribute --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/profile/<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>link tooltip-init profile-link<span class="token punctuation">"</span></span> <span class="token attr-name">data-tooltip</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Profile settings<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>profile-icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span></pre></code>
          <p>In this case if you need to access created Tooltip instance you can use the <code>app.tooltip.get</code> app method:</p><pre><code class="js"><span class="token keyword">var</span> tooltip <span class="token operator">=</span> app<span class="token punctuation">.</span>tooltip<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'.profile-link'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// change tooltip text</span>
tooltip<span class="token punctuation">.</span><span class="token function">setText</span><span class="token punctuation">(</span><span class="token string">'Profile'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre></code>
          <div class="with-device">
            <h2 data-device-preview="../docs-demos/core/tooltip.html">Examples</h2><pre><code class="html"><span class="token comment">&lt;!-- navbar with link with tooltip --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>navbar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>navbar-inner sliding<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tooltip<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>link navbar-tooltip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>icon f7-icons if-ios<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>icon material-icons if-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>info_outline<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
...

<span class="token comment">&lt;!-- icons with tooltip in text --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block block-strong<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia augue urna, in tincidunt augue hendrerit ut. In nulla massa, facilisis non consectetur a, tempus semper ex. Proin eget volutpat nisl. Integer lacinia maximus nunc molestie viverra. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>icon f7-icons color-blue icon-tooltip if-ios<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>info_fill<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>icon material-icons color-blue icon-tooltip if-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>info<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span> Etiam ullamcorper ultricies ipsum, ut congue tortor rutrum at. Vestibulum rutrum risus a orci dictum, in placerat leo finibus...
  ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
...

<span class="token comment">&lt;!-- button with auto init tooltip --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button button-round button-outline button-small tooltip-init<span class="token punctuation">"</span></span> <span class="token attr-name">data-tooltip</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Button tooltip text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Button with Tooltip<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span></pre></code><pre><code class="js"><span class="token comment">// icons tooltip. One tooltip for all icons with "icon-tooltip" class</span>
<span class="token keyword">var</span> iconTooltip <span class="token operator">=</span> app<span class="token punctuation">.</span>tooltip<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  targetEl<span class="token punctuation">:</span> <span class="token string">'.icon-tooltip'</span><span class="token punctuation">,</span>
  text<span class="token punctuation">:</span> <span class="token string">'Tooltip text'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// navbar link tooltip</span>
<span class="token keyword">var</span> navbarTooltip <span class="token operator">=</span> app<span class="token punctuation">.</span>tooltip<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  targetEl<span class="token punctuation">:</span> <span class="token string">'.navbar-tooltip'</span><span class="token punctuation">,</span>
  text<span class="token punctuation">:</span> <span class="token string">'One more tooltip&lt;br>with more text&lt;br>&lt;em>and custom formatting&lt;/em>'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          </div>
        </div>
      </div>
    </main>
    <script src="/framework7-v3/js/jquery-1.11.0.min.js"></script>
    <script src="/framework7-v3/js/main.js"></script>
  </body>
</html>